<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 4: Everything's An Illusion</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">

#bg, #char {display: none;}

#canvas {
	width: 800px;
	height: 600px;
	background: #fff;
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}


</style>


<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",3500);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 3) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;

	}
</script>


</head>
<body onload="init()">


	<h1>FIGMENT OF THE IMAGINATION</h1>
	<h2>Chapter 4: Everything's An Illusion</h2>
	<h2>Scene 4: Reality or Vagary?</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>

<center><img src="images/photo.png" width=800 style="margin:-5px 0 0 0;"></center>
<img id="bg" src="images/ch4/bgiphone.png" width=800 height=600>
<img id="char" src="images/ch4/adatexting.png">

<div id="scenetext">
<p>
"I just had a conversation with John! I think he was observing me. He likes me!" she messaged her friend. 
"How was that possible? John didn't even attend school today. He broke his arm from football practice." 
"What? How did that happen? I swear I just talked to him. He even told me he'll hang out with me!" she 
replied. "I don't know Ada. But John's really in agony."

</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter4Scene3.jsp" title="A Conversation With John"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter4Scene5.jsp" title="Babysitting Little Biggins"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

